<template>
  <div ref="mapchart" style="width: 95%; height: 380px;padding-left: 5%;">

  </div>
</template>

<script setup>
import * as echarts from 'echarts'; // 将echarts中的所有对象放到echarts中
import {onMounted, reactive, ref} from "vue";
import china from "@/assets/china.json"
const points = reactive([
  {name: '广东', value: [113.266887, 23.133306], itemStyle: {color: '#00EEFF'}},
  {name: '福建', value: [119.296194,26.101082], itemStyle: {color: '#00EEFF'}},
  {name: '江苏', value: [119.767413, 33.041544], itemStyle: {color: '#00EEFF'}},
  {name: '新疆', value: [87.617733, 43.792818], itemStyle: {color: '#00EEFF'}},
  {name: '北京', value: [116.405285, 39.904989], itemStyle: {color: '#00EEFF'}},
  {name: '安徽', value: [117.283042, 31.86119], itemStyle: {color: '#A6283F'}},

])
const linesData = reactive([
  { coords:[[117.283042, 31.86119], [119.767413, 33.041544]] },
  { coords:[[117.283042, 31.86119], [113.266887, 23.133306]] },
  { coords:[[117.283042, 31.86119], [119.296194,26.101082]] },
  { coords:[[117.283042, 31.86119], [87.617733, 43.792818]] },
])
const mapchart = ref(); //创建dom引用，ref() 函数的返回值
let option = {
   title: {
     text: "销售地图",
     left: 'center',
     textStyle: {
       fontSize: 20,
       color: '#fff'
     }
   },
  // 背景颜色
  backgroundColor: '#071f5e',
  // 地图配置
  geo: {
    left: 'center',
    top: 'middle',
    right: 'auto',
    bottom: 'auto',
    map: 'china',
    label: {
      normal: {
        show: false,
        textStyle: {
          color: '#fff'
        }
      },
      emphasis: {
        textStyle: {
          color: '#fff'
        }
      }
    },
    // 地图区域的样式设置
    itemStyle: {
      normal: {
        borderColor: '#5089EC',
        borderWidth: 1,
        areaColor: {
          type: 'radial',//径向渐变
          x: 0.5,//圆心
          y: 0.5,//圆心
          r: 0.8,//半径
          colorStops: [
            { //0号处的颜色
              offset: 0,
              color: 'rgba(0,102,154,0)'
            },
            {//100号处的颜色
              offset: 1,
              color: 'rgba(0,102,154,.4)'
            }
          ],
        },
        emphasis: {
          areaColor: '#236ce7',
          borderWidth: 0
        }
      }
    }
  },
  series: [
    {
        type: 'effectScatter',//带有涟漪特效动画的散点（气泡）图
        coordinateSystem: 'geo',//该系列使用的坐标系：地理坐标系
        effectType:'ripple',//特效类型，目前只支持涟漪特效ripple',意为"涟漪”
        showEffectOn: 'render',
        rippleEffect: {//涟漪特效相关配置。
          period: 10,  //动画的周期，秒数。
            scale: 3, //动画中波纹的最大缩放比例。
            brushType:'stroke'
        },
      zlevel: 1,//所有图形的zlevel值。
      data: points
    },
    {
    //线条系列数据
      type:'lines',
      zlevel:2,
      symbol:['none', 'arrow'], //标记的图形：箭头
      symbolSize:10,  //标记的大小
      lineStyle:{ //线条样式
        normal: {
          color: '#32c9ee',
          width: 2.5,//线条宽度
          opacity: 0.8,//尾迹线条透明度
          curveness: 0.2//尾迹线条曲直度
        }
      },
      data: linesData
    }
  ]
}
onMounted(() => {
  // 基于准备好的dom,初始化echarts实例
  const myChart = echarts.init(mapchart.value)
  echarts.registerMap('china', china)
  // 使用刚指定的配置项和数据显示图表
  myChart.setOption(option)
})
</script>

<style scoped>

</style>